<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
      <input type="text" v-model="num">
      <button v-on:click="num++">登录</button>
      <button v-on:click="loginout()">登出</button>
        <h1>{{name}},欢迎您,当前登录{{num}}次,当前登录时间:{{nowDate()}}</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        
        // 1.new vue实例 每个vue应用都是通过vue函数创建一个新的vue实例开始的
        new Vue({
          el: "#app", // 挂载的模板
          data:{      // 绑定的数据  当数据属性的值发生改变时,视图会进行重新渲染,响应式的
            name: "学院",
            num: 1
          },
          methods: {
           nowDate(){
            return new Date().toLocaleDateString()
           },
           loginout(){
            this.num--;
           }
          },
        });

        // 双向绑定, 数据发生改变, 视图也要发生改变
        // 指令:来简化对Dom的频繁操作
        // 方法: 声明方法可以实现更复杂的操作,声明methods属性中
        

    </script>

</body>
</html>